<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common :: header"/>
<body>
<div class="page layout-row">
    <div class="card layout-left" style="flex: 15">
        <div class="card-header">类别列表</div>
        <div class="card-body">
            <div id="table"></div>
            <div id="toolbar" style="display: none">
                <a shiro:hasPermission="system:dict:add" href="#" onclick="add()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add',plain:true">增加</a>
                <a shiro:hasPermission="system:dict:edit" href="#" onclick="edit()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">修改</a>
                <a shiro:hasPermission="system:dict:delete" href="#" onclick="deleteType()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-remove',plain:true">删除</a>
                <input id="btnShowDisabled">
            </div>
        </div>
    </div>
    <div class="card layout-center">
        <div class="card-header">字典项</div>
        <div class="card-body">
            <div id="table1"></div>
            <div id="toolbar1" style="display: none">
                <a shiro:hasPermission="system:dict:add" href="#" onclick="addData()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add',plain:true">增加</a>
                <a shiro:hasPermission="system:dict:edit" href="#" onclick="editData()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">修改</a>
                <a shiro:hasPermission="system:dict:delete" href="#" onclick="deleteData()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-remove',plain:true">删除</a>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript">

    $(function() {
        $('#table').datagrid({
            url: '/system/dict/list',
            queryParams: {status: 0},
            fit: true,
            fitColumns: true,
            nowrap: true,
            singleSelect: true,// 单选模式
            pagination: true,
            pageSize: 20, // 每一页多少条数据
            pageList: [ 10, 20, 30, 40, 50 ], // 可以选择的每页的大小的combobox
            idField: 'dictId',
            sortName: 'dictId',
            toolbar: '#toolbar',
            onLoadSuccess: function(){
                $('#table').datagrid('selectRow', 0);
            },
            onSelect: function(index, row){
                $('#table1').datagrid('reload', {dictType: row.dictType});
            },
            columns:[ [
                {field: 'ck', checkbox: true },
                {field: 'dictName', title: '字典名称', width: 100,align:'center'},
                {field: 'dictType', title: '字典关键字', width: 150,align:'center'},
                {field: 'status',title: '状态',align:'center', width: 50,formatter: statusFormatter}
            ] ]
        });

        $('#table1').datagrid({
            url: '/system/dict/dataList',
            fit: true,
            fitColumns: true,
            nowrap: true,
            singleSelect: true,// 单选模式
            idField: 'dictId',
            toolbar: '#toolbar1',
            onBeforeLoad: dm.notLoadOnFirstTime,
            onLoadSuccess: function(){
                $('#table1').datagrid('unselectAll');
            },
            columns:[ [
                {field: 'ck', checkbox: true },
                {field: 'dictLabel', title: '字典标签', width: 150,align:'center', formatter:function (value,row) {
                    return "<span class='layui-badge "+ row.listClass +"'>"+row.dictLabel+"</span>"
                    }
                },
                {field: 'dictValue', title: '字典键值', width: 100,align:'center'}
            ] ]
        });
    });

    function add() {
        dm.openDialog('新增类别', '/system/dict/add', 520, 280);
    }
    function edit() {
        dm.getRow('table',function (row) {
            dm.openDialog('修改类别','/system/dict/edit/'+row.dictId, 520, 320);
        })
    }
    function deleteType() {
        dm.getRow('table', row => {
            dm.confirm('删除操作不可恢复。您确定要删除吗？',() => {
                dm.post('/system/dict/delete/'+row.dictId, {}, function () {
                    dm.search('table');
                })
            })
        })
    }

    $('#btnShowDisabled').checkbox({
        label:'显示停用',
        onChange:function (checked) {
            dm.search('table', checked ? {} : {status:0});
        }
    });

    function addData() {
        dm.getRow('table',function (row) {
            dm.openDialog('新增字典项', '/system/dict/addData/'+row.dictType, 540, 420);
        })
    }
    function editData() {
        dm.getRow('table1',function (row) {
            dm.openDialog('修改字典项','/system/dict/editData/'+row.dictId, 540, 460);
        })
    }
    function deleteData() {
        dm.getRow('table1', row => {
            dm.confirm('删除操作不可恢复。您确定要删除吗？',() => {
                dm.post('/system/dict/deleteData/'+row.dictId, {}, function () {
                    dm.search('table1');
                })
            })
        })
    }

</script>
</body>
</html>
